<template>
    <div>
        <router-link to="/home" id="toHome"></router-link>
        <top-bar title="登录"></top-bar>
        <ul class="telLoginInput">
            <li><input v-model="tel" type="number" placeholder="请输入手机号"></li>
            <li class="telCode"><input v-model="code" type="number" placeholder="请输入验证码">
            <span @click="getLogin" class="telLoginGetCode" v-if="iscode">获取验证码</span>
            <span class="telLoginTime" v-else>{{settime}}s</span>
            </li>
        </ul>
        <div style="text-align:center;margin-top:120px"><mu-button @click="getCodeLogin" style="height:40px;background:#55A9FF;color:#ffffff;width:75vw;border-radius: 100px" :ripple=false :flat=true >确认</mu-button></div>
    </div>
</template>

<script>
    import topBar from '@/components/common/topBar.vue'
    import request from '@/request/index.js'
    export default {
        name: "telLogin",
      components:{
         topBar
      },
        data() {
            return {
                tel:'',
                code:'',
                appid:'',
                iscode:true,
                settime:60,
                token:'',
            }
        },
        methods:{
            getLogin:function(){
                var telReg = /^1[34578]\d{9}$/;
                if(telReg.test(this.tel)){
                    request.getCode(this);
                }
                
            },
            getCodeLogin:function(){
                request.getCodeLogin(this)
            }
        },
      created(){
       
      },
      mounted(){
          if(this.$route.query.openid){
            this.appid=this.$route.query.openid;
          }
          if(this.$cookie.get('token')){
                document.getElementById("toHome").click();
            }else{
                
            }
        
      }
    }
</script>

<style scoped lang="scss">
.telCode{
    input{
        width:120px;
    }
}
@media screen and (max-width: 330px) {
    .telCode{
        input{
            width:105px;
        }
    }
}
    .telLoginInput{
        width: 75vw;
        margin:0 auto;
        margin-top:50vw;
        li{
            width:75vw;
            height:40px;
            border-radius: 100px;
            background: #f5f5f5;
            padding: 0 26px;
            margin-top: 15px;
            line-height:40px;
            input{
                border:none;
                outline: none;
                background: #f5f5f5;
                font-size: 14px;
                line-height: 1em;
            }
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none !important;
                margin: 0;
            }

        }
    }
    .telLoginGetCode{
        color: #56ACFF;
        border-left:1px solid #666666;
        display: inline-block;
        width: 75px;
        font-size:13px;
        text-align: right;
        line-height: 1em;
    }
    .telLoginTime{
        color: #999999;
        border-left:1px solid #666666;
        display: inline-block;
        width: 75px;
        font-size:13px;
        text-align: right;
        line-height: 1em;
    }
</style>
